<template>
    <div class="songListContainer">
        <div class="heightQualityEntry">
            <img class="backgroundImg" src="http://p1.music.126.net/NDdtSac66rpsF_jMBh1JMQ==/109951164929306650.jpg"
                alt="" />
            <div class="cover">
                <img src="http://p1.music.126.net/NDdtSac66rpsF_jMBh1JMQ==/109951164929306650.jpg" alt="" />
            </div>
            <div class="entryInfo">
                <div class="tag">
                    <i class="iconfont icon-dianzan_kuai"></i>
                    精品歌单
                </div>
                <div class="name">《美国乡村乐图鉴与简史》</div>
                <div class="content">美国乡村乐图鉴与简史</div>
            </div>
        </div>
        <div class="songListNavBar">
            <div class="left">
                <SortBar :sort-list="sortList" :current-tag="currentTag" @getSortList="getSortList"
                    @clickSortBoxItem="clickSortBoxItem"></SortBar>
            </div>
            <div class="right">
                <SecondNavBar :current-tag="currentTag" :second-bar-data="secondSortList"
                    @clickSecondBarItem="clickSecondBarItem"></SecondNavBar>
            </div>
        </div>
        <!-- 展示歌单列表 -->
        <ListCard :list-card-item="musicList.playlists" @clickListCardItem="clickListCardItem"></ListCard>
        <div class="page">
            <el-pagination background v-model:currentPage="currentPage" @current-change="changePage" :page-size="50" layout="prev, pager, next" :total="musicList.total" />
        </div>
    </div>
</template>

<script setup>
import SortBar from '../../components/SortBar.vue'
import SecondNavBar from '../../components/SecondNavBar.vue'
import { reactive, ref, onBeforeMount } from 'vue'
import {useRouter} from 'vue-router'
import request from '../../api/index'
import ListCard from '../../components/ListCard.vue'
const router = useRouter()

onBeforeMount(() => {
    getFirstHighquality()
    getHotTag()
    getSortList()
    getMusicList()
})
const sortList = ref([])
const secondSortList = ref([])
const hotTags = ref([])
const currentTag = ref({})
const currentPage = ref(1)
const musicList = ref({})
const theFirstOfHighquality = ref({})
// 获取热门歌单tag
const getHotTag = async () => {
    let res = await request('playlist/hot')
    if (res.data.code == 200) {
        currentTag.value = res.data.tags[0]
        hotTags.value = res.data.tags
    }

}
// 获取歌单分类数据
const getSortList = async () => {
    let res = await request('/playlist/catlist')
    if (res.data.code == 200) {
        sortList.value = res.data.sub
        secondSortList.value = res.data.sub.slice(0, 10)
    }
}

//根据tag获取歌单列表
const getMusicList = async () => {
    let res = await request("/top/playlist", {
        cat: currentTag.value.name,  //分类名
        offset: 50 * (currentPage.value - 1) //偏移量，用于分页
    })
    // 响应结果里面的  total可以用于分页，所以把整个对象保存下来
    musicList.value = res.data
}

//获取高质量歌单的第一条数据
const getFirstHighquality = async () => {
    let res = await request("/top/playlist/highquality", {
        limit: 1,
    });
    theFirstOfHighquality.value = res.data.playlists[0]
}

// 处理点击事件
//点击sortBoxItem中的回调
const clickSortBoxItem = (item) => {
    currentTag.value = item
    currentPage.value = 1
    getMusicList()
}

// 接收二级navBar的回调
const clickSecondBarItem = (index) => {
    currentTag.value = secondSortList.value[index]
    currentPage.value = 1
    getMusicList()
}

//页码改变
const changePage = (page) => {
    getMusicList()
}

const clickListCardItem = (id) => {
    router.push({ name: 'musicListDetail', params: { id: id } })
}


</script>

<style lang="scss" scoped>
.songListContainer {
    padding: 5px 20px;
}

.heightQualityEntry {
    width: 100%;
    height: 160px;
    position: relative;
    display: flex;
    border-radius: 15px;
    overflow: hidden;

    .backgroundImg {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: -1;
        transform: translateY(-80px);
        // 滤镜filter，brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
        //blur：给图像设置高斯模糊，如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值
        filter: blur(30px) brightness(70%);
    }

    .cover {
        height: 130px;
        width: 130px;
        margin: 15px;

        img {
            width: 100%;
            border-radius: 15px;
        }
    }

    .entryInfo {
        .tag {
            width: 90px;
            text-align: center;
            font-size: 16px;
            color: #d59e54;
            border: #d59e54 1px solid;
            border-radius: 20px;
            padding: 6px 10px;
            margin: 20px 15px 15px;
        }

        .name {
            color: white;
            font-size: 20px;
            font-weight: 500;
        }

        .content {
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            margin-top: 10px;
            margin-left: 8px;
        }
    }
}

.songListNavBar {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    color: #666;;
}

.page {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
